<template>
  <div class="GoodsImgList">
    <div class="imgs">
      <a-tooltip arrow-point-at-center autoAdjustOverflow placement="bottom" v-for="(item, index) in collocationGoods" :key="index">
        <template slot="title">
          <p>
            <span>[{{ item.brandName }}]</span>
            <span>{{ item.productName }}</span>
          </p>
          <p>spu:{{item.productNoModel || item.productNoMore}}</p>
        </template>
        <img @click="switchShowParagraphPic(index)"  class="goods-img" :src="item.image == ''? 'https://picttype1.jnby.com/collocation/image-empty.png' : item.image" alt="" />
      </a-tooltip>
    </div>
    <div @click="showGoodsList = !showGoodsList" class="total">
      共{{ collocationGoods.length }}款<a-icon type="right" style="font-size:12px" />
    </div>
    <ParagraphPic :visible.sync="showParagraphPic" :imgs="collocationGoods.map(item => { return item.image})" :current="currentIndex" />
    <GoodsList v-if="showGoodsList" @close="close" :dataSource="collocationGoods" />
  </div>
</template>
<script>
import ParagraphPic from './ParagraphPic'
import GoodsList from './GoodsList'
export default {
  props: {
    showCount: {
      type: Boolean,
      default: false
    },
    collocationGoods: {
      type: Array,
      default: () => []
    }
  },
  components: {
    ParagraphPic,
    GoodsList
  },
  data() {
    return {
      showParagraphPic: false,
      showGoodsList: false,
      currentIndex: 1,
    }
  },
  methods: {
    switchShowParagraphPic(index) {
      this.currentIndex = index
      this.showParagraphPic = !this.showParagraphPic
    },
    close() {
      this.showParagraphPic = false
      this.showGoodsList = false
    }
  }
}
</script>
<style scoped>
.GoodsImgList {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.imgs {
  width: 180px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  margin-right: 20px;
  cursor: pointer;
}
.goods-img {
  width: 50px;
  height: 50px;
}
.goods-img:not(:last-child) {
  margin-right: 10px;
}
.total {
  cursor: pointer;
  white-space: nowrap;
  word-break: normal;
}
p{
  margin-bottom: 5px;
}
</style>
